Comparing the HEAD from Facebook and Google on Dion Almaer's Blog

Oct 08

Comparing the HEAD from Facebook and Google

When I built the Facebook Auto Expand Greasemonkey script I had to find out the function that kicks off the expansion, and I wanted it to be the right one.

Firebug can help out there, but as I looked through I was surprised by something:

Facebook doesn’t seem to minify/compress their JavaScript!

Since they push ~60 billion pages a month, I was a touch surprised. With this nugget I decided to grab the <head> of Facebook and iGoogle to compare.

The obvious differences as you look at them side by side (below):

iGoogle inlines a lot more: CSS and some JavaScript
Facebook has ~26 separate external CSS link tags for my profile
Facebook has a lot of external JavaScript files

Maybe it is time to run some YSlow?

My Facebook HEAD


<head>
<title>Facebook | Home</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="noodp" />
<meta name="description" content="Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, share links and videos, and learn more about the people they meet." />
<script type="text/javascript">var cc=new Image();cc.onload=function(){cc.hit=(typeof(Env)=="undefined");};cc.src="http://static.ak.facebook.com/images/global_menu_space.gif?12:37897";Env={method:"GET",dev:0,start:(new Date( )).getTime(),cache:(((typeof(cc)!="undefined")&&cc.hit)||0),ps_limit:5,ps_ratio:4,pkgv:1};</script><link rel="stylesheet" href="http://static.ak.facebook.com/css/base.css?12:62201" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/apps_menu.css?12:43718" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/typeahead.css?12:19905" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/wallpro.css?12:57950" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/dialog.css?12:39930" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/attachments.css?12:59060" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/captcha/captcha.css?12:60350" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/dialogpro.css?12:61009" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/editor.css?12:52799" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/components.css?12:53705" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/sharer.css?12:55903" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/share_media.css?12:60984" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/typeaheadpro.css?12:58664" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/inbox/css/inbox.css?12:62108" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/homeslice.css?12:58781" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/info.css?12:56012" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/profile.css?12:60600" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/feed.css?12:61849" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/feed_ad.css?12:43135" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/status.css?12:39712" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/gifts/gift.css?12:36833" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/mobilepro.css?12:60047" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/sms.css?12:59681" type="text/css"/>
<link rel="stylesheet" href="http://static.ak.facebook.com/css/sprite/icons.css?12:56618" type="text/css"/><!--[if lte IE 6]><style type="text/css" media="screen">/* <![CDATA[ */ @import url(http://static.ak.facebook.com/css/ie6.css?12:62634); /* ]]> */</style><![endif]-->
<!--[if gte IE 7]><style type="text/css" media="screen">/* <![CDATA[ */ @import url(http://static.ak.facebook.com/css/ie7.css?12:62093); /* ]]> */</style><![endif]-->
<script type="text/javascript" src="http://static.ak.facebook.com/js/base.js?12:62634"></script>

<script type="text/javascript" src="http://static.ak.facebook.com/js/extended.js?12:59503"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/string.js?12:59850"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/async.js?12:61542"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/deprecated.js?12:58595"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/apps_menu.js?12:55974"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/typeahead_ns.js?12:60552"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/suggest.js?12:52414"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/dynamic_dialog.js?12:51503"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/captcha.js?12:52414"></script>

<script type="text/javascript" src="http://static.ak.facebook.com/js/recaptcha_ajax.js?12:60350"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/typeaheadpro.js?12:61630"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/dialogpro.js?12:62226"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/fbml.js?12:62093"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/swfobject.js?12:55357"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/editor.js?12:58199"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/timezone.js?12:52149"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/share.js?12:61979"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/home.js?12:47671"></script>

<script type="text/javascript" src="http://static.ak.facebook.com/js/polls/polls.js?12:48801"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/pools.js?12:36733"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/editregion.js?12:56446"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/statuspro.js?12:52414"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/profile.js?12:62148"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/rooster.js?12:40867"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/poke.js?12:62143"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/privacy.js?12:57099"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/addfriend.js?12:62209"></script>

<script type="text/javascript" src="http://static.ak.facebook.com/js/mobile.js?12:61909"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/search_typeaheadpro.js?12:59982"></script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/animation.js?12:62119"></script><link rel="search" type="application/opensearchdescription+xml" href="http://static.ak.facebook.com/opensearch_desc.xml?12:27839" title="Facebook" />
<link rel="shortcut icon" href="http://static.ak.facebook.com/favicon.ico" />
</head>

My iGoogle HEAD

<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta name="description" content="iGoogle is your personalized Google page. Add news, photos, weather, and stuff from across the web to your page.">
<link rel="shortcut icon" href=" http://www.google.com/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="http://www.google.com/favicon.ico" type="image/x-icon"/>
<title>iGoogle</title>
<script>var _IG_time_epoch = (new Date()).getTime();var IGoogleTranslation = {};</script>
<script src="/ig/extern_js/f/CgJlbhICdXMrMAE4ACw/93yMfLuYD4A.js"></script>
<script>var domain = document.location.hostname;var google_pos = domain.indexOf('.google.');if (google_pos > -1) {domain = domain.substring(google_pos);document.cookie = "TZ=" + (new Date()).getTimezoneOffset()+ ';path=/;domain=' + domain;}_et="Tr8WCSVW";_source="";_setp_url="/ig/setp";_gmail_json_url="/ig/gmailjson";_magic_tabs_url="/ig/filltab";_prefid="";_uli=true;_pnlo=false;_mpnlo=false;_pl=false;_mod=true;_pid="";_old_html = false;_use_old_feed_styles = false;_cbp=true;_authpath="";_upc();var _pl_data = {};</script>
<script><!--
function save_chkbox_value(hidden_elem_name, checked) {var hidden_elem = document.getElementById(hidden_elem_name);hidden_elem.value = checked ? "1" : "0";}function module_loader_closure(el, rm) {return function() {_IG_RemoveModuleEventHandler(rm.id,'unzip',arguments.callee);el.src=rm.base_iframe_url;};}function RemoteModule(spec_url, id, render_inline, base_iframe_url,caching_disabled, is_zipped) {this.spec_url = spec_url;this.id = id;this.render_inline = render_inline;this.base_iframe_url = base_iframe_url;this.caching_disabled = caching_disabled;this.old_width = 0;this.wants_scaling = false;      this.is_inlined = function() { return this.base_iframe_url == ""; };this.is_zipped = is_zipped;};var remote_modules = [];_IG_RegisterOnloadHandler(function() {for (var i=0;i<remote_modules.length;i++){var rm=remote_modules[i];var el=_gel("remote_iframe_"+rm.id);if(el){if (rm.is_zipped && true) {_IG_AddModuleEventHandler(rm.id, 'unzip',module_loader_closure(el, rm));} else {el.src=rm.base_iframe_url;}}}});function ifpc_resizeIframe(iframe_id, height) {var el = document.getElementById(iframe_id);if (el) {el.style.height = height + "px";}}_IFPC.registerService('resize_iframe', ifpc_resizeIframe);function _ig_gmid_(iframe_id) {return(iframe_id.split("_")[2]);}function _setModTitle(title, module_id) {var title_element = _gel("m_" + module_id + "_title");if (title_element) {title_element.innerHTML = _hesc(title);}}function ifpc_setTitle(iframe_id, title) {if (typeof(iframe_id) == undefined|| !iframe_id || iframe_id == "undefined") {return;}_setModTitle(title, _ig_gmid_(iframe_id));}_IFPC.registerService('set_title', ifpc_setTitle);function _IG_SetTitle(title, specified_module_id) {if (typeof(specified_module_id) == "undefined"|| !specified_module_id || specified_module_id == "undefined") {throw new Error("Inline modules must specify their "+ "__MODULE_ID__ when using _IG_SetTitle");} else {_setModTitle(title, specified_module_id);}}function ifpc_setPref(iframe_id, var_args) {var module_id = _ig_gmid_(iframe_id);var prefs = new _IG_Prefs(module_id);var keyValues = new Array();for (var n = 1; n < arguments.length; n += 2) {keyValues.push(arguments[n], arguments[n + 1]);}prefs.set.apply(prefs, keyValues);}_IFPC.registerService('set_pref', ifpc_setPref);function share_gadget_safe(msg, url, width, mod_id, send_label,cancel_label) {_share_gadget(_hesc(msg), _hesc(url), _hesc(width), _hesc(mod_id),_hesc(send_label), _hesc(cancel_label));}_IFPC.registerService('share_gadget', share_gadget_safe);var isPubSubEventRouterLoaded = false;function setupPubSubEventRouter() {if (!isPubSubEventRouterLoaded) {document.write("\x3cdiv id\x3d\x22remote_pubsub_event_router\x22 name\x3d\x22remote_pubsub_event_router\x22 style\x3d\x22border:0;padding:0;margin:0;width:100%\x22\x3e\x3ciframe id\x3d\x22remote_iframe_pubsub_event_router\x22 name\x3d\x22remote_iframe_pubsub_event_router\x22 style\x3d\x22border:0;padding:0;margin:0;width:0;height:0;overflow:hidden\x22 frameborder\x3d0 scrolling\x3dfalse src\x3d\x22http://pubsub.gmodules.com/ig/modules/pubsub_event_router.html\x22\x3e\x3c/iframe\x3e\x3c/div\x3e");isPubSubEventRouterLoaded = true;}}// -->
</script>
<script src="/ig/f/CSyPjYmOhjg/lib/libminimessage.js"></script>
<style>.modbox .el {display:;}.modbox .csl, .modbox .es {display:none;}.modbox_e .el {display:none;}.modbox_e .csl, .modbox .es {display:;}.dm {position:relative;width:1px;height:1px;}.fres {width:expression(_gel("ffresults").offsetWidth+"px");overflow:hidden;}.panelo {}.panelc {}.mod {}.unmod {}form {display:inline;}.c {clear:both;}.fbox {margin-top:1px;margin-right:6px;display:block;overflow:hidden;width:12px;height:12px;background-image: url('/ig/images/max_dark_blue.gif');background-repeat: no-repeat;cursor:hand;cursor:pointer;}.fmaxbox, .fmaxbox_reverse_directionality {background-image:url('/ig/images/max_dark_blue.gif');}.fminbox, .fminbox_reverse_directionality {background-image:url('/ig/images/min_dark_blue.gif');}a.fmaxbox:hover, a.fmaxbox_reverse_directionality:hover {background-image:url('/ig/images/max_dark_blue_highlight.gif');}a.fminbox:hover, a.fminbox_reverse_directionality:hover {background-image:url('/ig/images/min_dark_blue_highlight.gif');}a.ddbox {background-image:url(/ig/images/arrow_blue.gif);}a.ddbox:hover {background-image:url(/ig/images/arrow_blue_highlight.gif);}a.delbox {background-image:url(/ig/images/x_blue.gif);}a.delbox:hover {background-image:url(/ig/images/x_blue_highlight.gif);}a.minbox {background-image:url(/ig/images/min_blue.gif);}a.minbox:hover {background-image:url(/ig/images/min_blue_highlight.gif);}a.maxbox {background-image:url(/ig/images/max_blue.gif);}a.maxbox:hover {background-image:url(/ig/images/max_blue_highlight.gif);}.f_tbl {font-size:12px;margin-right:2px;margin-left:2px;padding-top:4px;padding-bottom:4px;}.fr_tbl {margin-right:2px;margin-left:2px;padding-top:4px;padding-bottom:4px;}.fb {font-size:12px;padding:2px;padding-top:4px;border: 1px solid #d1d3d4;border-top:none;overflow:auto;}.sftl {border: 1px solid #d1d3d4;border-bottom:none;}.sftl_reverse_directionality {border: 1px solid #d1d3d4;border-bottom:none;clear: right;text-align: right;}.uftl {border:1px solid white;border-bottom:none;}.uftl_reverse_directionality {border:1px solid white;border-bottom:none;clear: right;text-align: right;}.remote_module_textbox {box-sizing:border-box;-moz-box-sizing:border-box;padding:1px;padding-left:4px;margin:2px;margin-left:3px;width: 95%;}* html .remote_module_textbox {width: 91%;}.remote_module_select {box-sizing:border-box;-moz-box-sizing:border-box;padding:0px;width:95%;margin:2px;margin-left:3px;}</style><link rel="stylesheet" type="text/css" href="/ig/f/hDk4Fm4iv7I/ig.css"/><style></style><style>#gbar{float:left;height:22px}
#gbarl{border-top:1px solid #c9d7f1;font-size:0;height:1px;position:absolute;right:0;top:24px;width:110%}
#gbar a{color:#00c}
#gbar .gbard{background:#fff;border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;display:none;font-size:13px;position:absolute;top:24px;z-index:1000}
#gbar .gbard a{display:block;padding:.2em .5em;text-decoration:none;white-space:nowrap}
#gbar .gbard a:hover{background:#36c;color:#fff}
#gbar td{font-size:13px;padding-right:1em}
#guser{font-size:13px;padding-bottom:7px !important;padding-top:0}
#gbarc{font-size:0;height:1px}
#guser,#gbarc{background-color:#fff}#guser{color:#000;margin-bottom:0px}#guser a:link,#guser a:visited,#guser a:hover{color:#00c}#gbarl{border-top:0;border-bottom:1px solid #c9d7f1}#guser{padding-right:10px ! important;}</style>
<script>window.gbar={};(function(){function o(a,b,c){var e="on"+b;if(a.addEventListener){a.addEventListener(b,c,false)}else if(a.attachEvent){a.attachEvent(e,c)}else{var d=a[e];a[e]=function(){var f=d.apply(this,arguments),g=c.apply(this,arguments);return f==undefined?g:(g==undefined?f:g&&f)}}};var h=window.gbar,m=["affdom","channel","client","hl","hs","ie","lr","ned","oe","og","rls","rlz"];function i(a){return escape(unescape(a.replace(/\+/g," "))).replace(/\+/g,"%2B")}function j(a){return a=="c"||a=="o"||a=="m"}h.getHtml=function(a){var b;for(var c=0;c<a.length;c++){if(a[c][2]==""){b=a[c][0]}}var e=j(b)?" target=_blank":"",d="<td nowrap>",f="<table border=0 cellpadding=0 cellspacing=0 style=margin-left:"+h.getPad(true)+"px><tr>"+d;for(var c=0;c<a.length;c++){if(a[c][0]==b){f+=a[c][1].bold()+d}else{f+="<a href=";if(a[c][3]==3){f+='# onclick="this.blur();return gbar.toggle(event)" style=text-decoration:none'+e+"><u>"+a[c][1]+"</u> <span style=font-size:11px>▼</span></a><tr><td colspan="+c+"><td><iframe class=gbard id=gbarif style=border:0;z-index:999></iframe><div class=gbard id=gbardd onclick=gbar.stopB(event)>";d=""}else{f+=n(b,a[c][0],a[c][2])+e+" onclick=gbar.close(event)>"+a[c][1]+"</a>"+d}}}f+="</div></table>";return f};h.getPad=function(a){var b=-1,c=a?10:4,e=document.body.currentStyle,d=document.defaultView;if(e){b=a?e.marginLeft:e.marginTop}else if(d){b=a?d.getComputedStyle(document.body,"").marginLeft:d.getComputedStyle(document.body,"").marginTop}b=parseInt(b,10);return b>=0&&b<c?c-b:1};function n(a,b,c){var e=window.location.search.substring(1),d=e.match("q=([^&]*)"),f=e.match("near=([^&]*)"),g=c+(c.match("[?]")?"&":"?");g+="tab="+a+b;if(j(b)&&window.location.protocol=="https:"){g=g.replace("http:","https:")}if(!j(b)&&!j(a)){for(var k=0;k<m.length;k++){var l=e.match("("+m[k]+")=([^&]*)");if(l){g+="&"+l[1]+"="+i(l[2])}}if(d&&f&&a=="l"&&b!="l"){g+="&q="+i(d[1])+"+"+i(f[0])}else if(d){g+="&q="+i(d[1])}}return g}h.toggle=function(a){h.stopB(a);var b=document.getElementById("gbardd"),c=document.getElementById("gbarif");if(b&&c){b.style.display=b.style.display=="block"?"none":"block";c.width=b.offsetWidth;c.height=b.offsetHeight;c.style.display=b.style.display}return false};h.close=function(a){var b=document.getElementById("gbardd");if(b&&b.style.display=="block"){h.toggle(a)}};h.stopB=function(a){if(!a){a=window.event}a.cancelBubble=true};o(document,"click",h.close);})();</script>
</head>

One Response to “Comparing the HEAD from Facebook and Google”

SneakyWho_am_i Says:
July 28th, 2009 at 10:00 pm
Just scanning down the page not really reading the markup, looks like igoogle wins hands down. facebook devs, get it together!

web developers, don’t just trust user agents to cache things as they’re instructed. get defensive.

techno.blog("Dion")

Comparing the HEAD from Facebook and Google

One Response to “Comparing the HEAD from Facebook and Google”

Leave a Reply

Support HTML5

Recent Mobile Photo

Activity Stream

Feeds

Links

Categories

Archives

About Me